import { Canvas, Meta, Story } from '@storybook/blocks';
import * as InputFieldStories from './input-field.stories';

<Meta title="Molecules/Input Field/Overview" />

# Molecules input field overview

<br />

### Composition

The input field molecule is composed of:

- a label
- an input
- an optional hint
- an optional error message

<br />

## States

<br />

### Default

<Canvas>
  <Story of={InputFieldStories.InputFieldDefault}></Story>
</Canvas>

### with hint

<Canvas>
  <Story of={InputFieldStories.InputFieldHint}></Story>
</Canvas>

### with error

<Canvas>
  <Story of={InputFieldStories.InputFieldError}></Story>
</Canvas>

### with hint and error

<Canvas>
  <Story of={InputFieldStories.InputFieldHintError}></Story>
</Canvas>

## Code

<br />

// TODO: add source docs

## Use cases

> This component is used in the following stories:

### Molecules

### Organisms

### Templates

### Pages
